<script lang="ts">
  import * as echarts from "echarts";
  import { onMount } from "svelte";
  import Title from "../../../components/Title/Title.svelte";
  import { statusTrend } from "../stores";

  let myChart;
  let seriesData = [],
    seriesCatalog = [];
  onMount(async () => {
    statusTrend.get();
    myChart = echarts.init(document.getElementById("c-1"));
    statusTrend.subscribe((trend) => {
      seriesData = trend.data;
      seriesCatalog = trend.catalog;
      if (seriesData.length && seriesCatalog.length) {
        myChart.setOption(getOption(seriesData, seriesCatalog));
      }
    });
  });

  function getOption(data, catalog) {
    let rate = 1;
    if (window.innerWidth) {
      rate = Math.ceil(window.innerWidth / 1920);
    }
    return {
      legend: {
        selectedMode: false,
        top: 8,
        textStyle: {
          color: "#fff",
          fontSize: 12,
        },
        // itemWidth: 20,
        // itemHeight: 8,
      },
      title: { text: "" },
      tooltip: { trigger: "axis" },
      grid: {
        top: "12%",
        right: "6%",
        left: "4%",
        bottom: "4%",
        containLabel: true,
      },
      xAxis: {
        axisLabel: { color: "#ffffff", fontSize: 12 * rate },
        axisLine: { show: true, lineStyle: { color: "#0a66ae" } },
        axisTick: { show: true, lineStyle: { color: "#0a66ae" } },
        splitLine: {
          show: true,
          interval: 0,
          lineStyle: { type: "dashed", color: "#0a66ae" },
        },
        data: catalog,
      },
      yAxis: {
        axisLabel: { color: "#ffffff", fontSize: 12 * rate },
        axisLine: { show: true, lineStyle: { color: "#0a66ae" } },
        axisTick: { show: true, lineStyle: { color: "#0a66ae" } },
        splitLine: {
          show: true,
          interval: 0,
          lineStyle: { type: "dashed", color: "#0a66ae" },
        },
      },
      series: [
        {
          name: data[0].name,
          type: "bar",
          barWidth: 22 * rate,
          stack: "total",
          data: data[0].data,
          itemStyle: { color: "#448bff" },
        },
        {
          name: data[1].name,
          type: "bar",
          barWidth: 22 * rate,
          stack: "total",
          data: data[1].data,
          itemStyle: { color: "#f3d736" },
        },
        {
          name: data[2].name,
          type: "bar",
          barWidth: 22 * rate,
          stack: "total",
          data: data[2].data,
          itemStyle: { color: "#ed687b" },
        },
        {
          name: data[3].name,
          type: "line",
          lineStyle: { width: 3 * rate },
          data: data[3].data,
          itemStyle: { color: "#db0000" },
        },
      ],
    };
  }

  function onResize() {
    if (myChart) {
      if (seriesData.length && seriesCatalog.length) {
        myChart.setOption(getOption(seriesData, seriesCatalog));
      }
      myChart.resize();
    }
  }
</script>

<svelte:window on:resize={onResize} />
<div class="h-full flex flex-col">
  <Title title="设备状态趋势统计" />
  <div id="c-1" class="flex-1 w-full" />
</div>

<style>
</style>
